<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='zhyyglhtxt'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
    <style>
        .site-content {
            width: 899px;
            min-height: 900px;
            padding: 20px 0 10px 20px;
        }

        .site-doc-icon {
            margin-bottom: 50px;
            font-size: 0;
        }

        .site-doc-icon li {
            display: inline-block;
            vertical-align: middle;
            width: 127px;
            height: 105px;
            line-height: 25px;
            padding: 20px 0;
            margin-right: -1px;
            margin-bottom: -1px;
            border: 1px solid #e2e2e2;
            font-size: 14px;
            text-align: center;
            color: #666;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .site-doc-anim li {
            height: auto;
        }

        .site-doc-icon li .layui-icon {
            display: inline-block;
            font-size: 36px;
        }

        .site-doc-icon li .doc-icon-name,
        .site-doc-icon li .doc-icon-code {
            color: #c2c2c2;
        }

        .site-doc-icon li .doc-icon-fontclass {
            height: 40px;
            line-height: 20px;
            padding: 0 5px;
            font-size: 13px;
            color: #333;
        }

        .site-doc-icon li:hover {
            background-color: #f2f2f2;
            color: #000;
        }
    </style>
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

    <form:form commandName="goodsChannel" method="${_method }" class="layui-form" id="form">
        <input type="hidden" name="_method" value="${_method }"/>
        <form:hidden path="id"/>

        <c:if test="${goodsChannel.parent != null && goodsChannel.level != '3'}">
            <form:hidden path="parent.id"/>
        </c:if>

        <c:if test="${goodsChannel.level == '3'}">

            <div class="layui-form-item goodsChannelArea">
                <label class="layui-form-label"><fmt:message key='splm'/></label>

                <div class="layui-input-inline" style="width: 130px">
                    <select lay-verify="required" id="topChannel" lay-filter="topChannel">
                        <option value=""><fmt:message key='qxz'/></option>
                        <c:forEach items="${channels}" var="item">
                            <option value="${item.id}"
                                    <c:if test="${item.id eq goodsChannel.parent.parent.id}">selected="selected"</c:if> >${item.name}</option>
                        </c:forEach>
                    </select>
                </div>

                <div class="layui-inline middleChannel">
                    <div class="layui-input-inline" style="width: 130px">
                        <select lay-verify="required" name="parent.id" id="middleChannel" lay-filter="middleChannel">
                            <option value=""><fmt:message key='qxz'/></option>
                            <c:forEach items="${goodsChannel.parent.parent.children}" var="item">
                                <c:if test="${item.deleteStatus == 0 &&item.status == 1}">
                                    <option value="${item.id}"
                                            <c:if test="${item.id eq goodsChannel.parent.id}">selected="selected"</c:if> >${item.name}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
        </c:if>

        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='lmmc'/></label>
            <div class="layui-input-block">
                <form:input path="name" lay-verify="required" class="layui-input" style="width: 300px;"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><fmt:message key='lmtb'/></label>
            <div class="layui-input-block">
                <form:hidden path="icon" id="goodsChannel-icon" class="layui-input"/>
                <a type="button" id="choose-goodsChannel-icon" value="<fmt:message key='sc'/>" class="layui-btn layui-btn-sm layui-btn-normal"><fmt:message key='sctp'/></a>
                <div id="feijinImage-goodsChannel-icon">
                    <c:if test="${not empty goodsChannel.icon}">
                        <img src="${store_domain}/uploads/${goodsChannel.icon}" style="width:120px;height:120px;margin-top:10px;">
                    </c:if>
                    <c:if test="${empty goodsChannel.icon}">
                        <img src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                    </c:if>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red">*</b> 类目状态</label>
            <div class="layui-input-inline" style="width:70%;">
                <input type="radio" name="status" lay-filter="status" lay-verify="required" value="1" title="启用" <c:if test="${goodsChannel.status eq 1}">checked="checked"</c:if>/>
                <input type="radio" name="status" lay-filter="status" lay-verify="required" value="2" title="禁用" <c:if test="${goodsChannel.status eq 2}">checked="checked"</c:if>/>
            </div>
        </div>

        <c:if test="${goodsChannel.level == 2 || goodsChannel.level == 3}">
            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='tjscdsy'/></label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="recommend" lay-skin="switch" lay-text="<fmt:message key='s|f'/>" <c:if test="${goodsChannel.recommend}">checked</c:if>>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='tjcgdsy'/></label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="supplierRecommend" lay-skin="switch" lay-text="<fmt:message key='s|f'/>" <c:if test="${goodsChannel.supplierRecommend}">checked</c:if>>
                </div>
            </div>
        </c:if>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-sm" id="save" id="submit" lay-filter="submit" lay-submit><i class="layui-icon">&#xe63c;</i> <fmt:message key='bc'/></a>
                <c:if test="${_method eq 'PUT' && goodsChannel.status == 2}">
                    <a class="layui-btn layui-btn-sm layui-btn-danger" id="remove"><i class="layui-icon">&#xe640;</i> <fmt:message key='sc'/></a>
                </c:if>
            </div>
        </div>
    </form:form>

</div>
<div style="display:none;">
    <form action="${web_domain}/upload/image" method="post" id="upload-goodsChannel-icon" enctype="multipart/form-data">
        <input id="goodsChannel-icon-file" name="file" type="file"/>
    </form>
</div>

<script>

    function closeRoute() {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.closeAll();
        });
    }

    $(function () {

        layui.use(['form', 'laydate'], function () {

            var form = layui.form;
            var laydate = layui.laydate;

            form.on('submit(submit)', function (data) {

                var status = $(":radio[name='status']:checked").val();
                if (!status) {
                    layui.use('layer', function () {
                        layer.msg("<fmt:message key='qxzzt'/>");
                    });
                    return false;
                }

                $("#form").ajaxSubmit({
                    success: function (result) {
                        if (result.status) {
                            layer.alert("<fmt:message key='bccg'/>", "1", function () {
                                window.parent.location.reload();
                            });
                        } else {
                            layui.use('layer', function () {
                                layer.msg(result.message);
                            });
                        }
                    }
                });
            });

            //加载二级商品类目
            form.on('select(topChannel)', function (data) {
                if (data.elem != data.value) {
                    var id = $("#topChannel").val();
                    $(".middleChannel").remove();

                    $.ajax({
                        url: "${web_domain}/mall/goods/channel/childChannels?id=" + id,
                        type: "get",
                        dataType: "JSON",
                        success: function (result) {
                            if (result.status && result.result != null) {
                                var channelsHTML = "<div class='layui-inline middleChannel'>" +
                                    "<div class='layui-input-inline' style='width: 130px' >" +
                                    "<select lay-verify='required' name='parent.id' id='middleChannel' class='layui-input' lay-filter='middleChannel'>" +
                                    "<option value=''><fmt:message key='qxz'/></option>";
                                $.each(result.result, function (index, item) {
                                    channelsHTML += "<option value='" + item.id + "' >" + item.name + "</option>"
                                });
                                channelsHTML += "</select></div></div>";
                                $(".goodsChannelArea").append(channelsHTML);
                                form.render('select');//重新渲染
                            }
                        }
                    });
                }
            });

        });

        $("#choose-goodsChannel-icon").click(function () {
            $("#goodsChannel-icon-file").click();
        });
        $("#goodsChannel-icon-file").change(function () {
            $("#upload-goodsChannel-icon").ajaxSubmit({
                type: "post",
                dataType: "JSON",
                success: function (result) {
                    if (result.status) {
                        $("#goodsChannel-icon").attr("value", result.path);
                        $("#feijinImage-goodsChannel-icon").html("<img src='${store_domain}/uploads/" + result.path + "' style='width:120px;height:120px;margin-top:10px;' />'");
                    }
                },
                error: function (result) {
                    console.log(result.responseText);
                }
            });
        });


        //删除操作
        $("#remove").click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    type: 0,
                    title: '<fmt:message key='sclm'/>',//自定义标题样式
                    border: [0],
                    content: '<span class="orange"><fmt:message key='qdscglmm'/></span>',
                    btn: ['<fmt:message key='sc'/>', '<fmt:message key='qx'/>'],
                    yes: function () {
                        $.ajax({
                            type: "post",
                            url: "${web_domain}/mall/goods/channel/remove",
                            dataType: "json",
                            data: {
                                "id": ${goodsChannel.id},
                                "_method": "delete"
                            },
                            success: function (data) {
                                if (data.status) {

                                    layer.alert("<fmt:message key='sccg'/>", "1", function () {
                                        window.parent.location.reload();
                                    });

                                } else {
                                    layer.msg("<fmt:message key='gflxygldspzs,byxsc'/>");
                                }
                            }
                        });
                    },
                    no: function () {
                        layer.close(index);
                    }
                });
            });
        });

        $(document).on('click', '.feijin-remove', function () {
            $("#content").html("");
        });


    });
</script>
</body>
</fmt:bundle>
</html>